/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'
import PasswordGesture from 'react-native-gesture-password';

const Password1 = '';

export default class SetGesturePassword extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            message: '请绘制解锁图案',
            status: 'normal',
            shoushimima: global.account && global.account.accountData.shoushimima ? global.account.accountData.shoushimima : '',
            shoushiopen: false
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack(this.state.shoushimima, this.state.shoushiopen);
        this.props.navigation.goBack();
    }

    componentWillUnmount(){
        this.onBack();
        
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    onStart = () => {
        if ( Password1 === '') {
            this.setState({
                message: '请绘制解锁图案'
            });
        } else {
            this.setState({
                message: '请再次绘制解锁图案'
            });
        }
    }

    onEnd = (password) => {
        if ( Password1 === '' ) {
            // The first password
            Password1 = password;
            this.setState({
                status: 'normal',
                message: '请再次绘制解锁图案'
            });
        } else {
            // The second password
            if ( password === Password1 ) {
                this.setState({
                    status: 'right',
                    message: '解锁图案绘制成功',
                    shoushimima: password,
                    shoushiopen: true
                    // message: 'Your password is set to ' + password
                });

                storage.save({
                    key: 'accountData',
                    data: {
                        account: global.account.accountData.account,
                        shoushimima: password,
                        shoushiopen: true
                    }
                });

                global.account = {
                    accountData: {
                        account: global.account.accountData.account,
                        shoushimima: password,
                        shoushiopen: true
                    }
                };

                Password1 = '';
                this.onBack();
                // your codes to close this view
            } else {
                this.setState({
                    status: 'wrong',
                    message:  '两次解锁图案不一致，请重新绘制'
                });
            }
        }
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'设置手势密码'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                    rightButton = {UtilsView.getRightKefuBlackButton(() => this.onPushNavigator('Kefu'))}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <PasswordGesture
                    ref='pg'
                    status={this.state.status}
                    message={this.state.message}
                    onStart={() => this.onStart()}
                    onEnd={(password) => this.onEnd(password)}
                    />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
});
